<script setup lang="ts">
import { ref,reactive } from 'vue'
import {
  Search,
  Refresh,
  Plus
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const router = useRouter()
let formData=reactive({
    status:"",
    shopName:"",
    orderTime:""
})
const currentPage=ref(1);
const pageSize=ref(10);
const small = ref(false)
const background = ref(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
// 查找
const searchClick = () => {
    console.log(formData)
}
// 重置
const resetClick = () => {
    formData.status=""
    formData.shopName=""
}
// 物流发货
const addShopClick=()=>{
    router.push({
        path:"/shopAdd"
    })
}
// 查看
const handleEdit=(row:any)=>{
    router.push({
        path:"/shopAdd",
        query:{
            orderType:1,
            id:row.date
        }
    })
}
// 分页
const handleSizeChange=(val:number)=>{
    pageSize.value=val;
}
const handleCurrentChange=(val:number)=>{
    currentPage.value=val;
}
</script>

<template>
    <div class="types">
        <div class="types-content">
            <div class="types-content-header">
                <el-form :inline="true" :model="formData" class="demo-form-inline">
                    <el-form-item label="商品名称：">
                        <el-input v-model="formData.shopName" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="商品类型：">
                        <el-select
                            v-model="formData.status"
                            placeholder="请选择使用状态"
                            style="width: 240px"
                            clearable
                        >
                            <el-option label="已使用" value="1" />
                            <el-option label="未使用" value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品状态：">
                        <el-select
                            v-model="formData.status"
                            placeholder="请选择使用状态"
                            style="width:240px"
                            clearable
                        >
                            <el-option label="未支付" value="1" />
                            <el-option label="已支付" value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :icon="Search" @click="searchClick">查询</el-button>
                        <el-button :icon="Refresh" @click="resetClick">重置</el-button>
                        <el-button type="primary" :icon="Plus" @click="addShopClick">添加商品</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-container">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column prop="state" label="商品名称" />
                    <el-table-column prop="name" label="商品金额" />
                    <el-table-column prop="date" label="商品类型" />
                    <el-table-column prop="date" label="库存数量" />
                    <el-table-column prop="date" label="商品状态" />
                    <el-table-column prop="date" label="商品描述" />
                    <el-table-column prop="date" label="上架时间" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="handleEdit(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[100, 200, 300, 400]"
                        :small="small"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.pagination{
    position:fixed;
    right:0;
    padding:20px;
}
</style>
